<template>
	<view class="main">
		<image src="https://resource.lanbaozixun.com/uploads/images/202403291014411d0614421.png" mode="widthFix" class="bg"></image>
		<image src="../../static/images/logo.png" mode="widthFix" class="logo"></image>
		<view class="bg-white content">
			<view>
				<h2 class="title bold" v-html="productData.title"></h2>
				<h3 class="son-title u-text-center u-padding-top-15" >内部动态码一人一码专属渠道</h3>
			</view>
			<image :src="captchaSrc(productData.qr_code_base64)" mode="widthFix" class="qr-code"></image>
			<view class="hint u-margin-top-25">
				<view class="mb5 nr u-padding-25 xxl white hint-btn-style" >提示：微信扫码申请</view>
				<view class="mb5 nr u-padding-top-15">失效时间:{{productData.failure_time}}</view>
				<view class="mb5 nr u-padding-top-15" v-if="userInfo.nickname">渠道经理:{{userInfo.nickname||''}}</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		mapGetters,
		mapActions
	} from 'vuex'
	import {
		QRCode,
		GetImg,
		GetPixelRatio,
		GetPx
	} from '@/uni_modules/wmf-code/js_sdk/index.js';
	import {
		getHelpDetail as getArticleDetail
	} from '../../api/new';
	export default {
		data() {
			return {
				produtcId: 0,
				productData: []
			};
		},
		onLoad(e) {
			this.getUser()
			this.produtcId = e.id;
			this.getArticleDetailFun()
		},
		methods: {
			...mapActions([ 'getUser']),
			captchaSrc(e) {
				return e.replace(/[\r\n]/g, "");
			},
			getArticleDetailFun() {
				getArticleDetail({
					type: 1,
					id: this.produtcId
				}).then(res => {
					if (res.code == 1) {
						this.productData = res.data;
					}
				});
			}
		},
		computed: {
			...mapGetters(["userInfo"]),
		}
	}
</script>

<style lang="scss">
	page {
		background: #f0f4f6;
	}

	.bg {
		width: 100%;
	}
	
	.logo{
		top: 0;
		left: 0;
		width: 160rpx;
		height: 160rpx;
		position: absolute;
	}

	.content {
		top: 50%;
		left: 50%;
		width: 90%;
		height: 80%;
		position: fixed;
		color: #525252;
		border-radius: 10px;
		transform: translate(-50%, -50%);
		padding: 10px 15px 10px 15px;
		display: flex;
		flex-direction: column;
		justify-content: space-around;

		.title {
			color: #525252;
			font-size: 28px;
			text-align: center;
		}
		
		.son-title{
			
		}

		.qr-code {
			width: 55%;
			height: 80%;
			margin: 20px auto;
			aspect-ratio: 1/1;
			display: block;
		}

		.hint {
			font-size: 20px;
			text-align: center;
			
			.hint-btn-style{
				width: 80%;
				margin: 0 auto 40rpx;
				border-radius: 100rpx;
				background-color: #66a6ff;
			}
		}

		button {
			width: 95%;
			height: 40px;
			line-height: 40px;
			vertical-align: middle;
			border: 1px solid #b4c7da;
			border-radius: 5px;
			overflow: hidden;
			text-align: center;
			background: linear-gradient(to right, #f34648, #ef6d6e);
			border: 0px;
			color: #fff;
			font-size: 16px;
			margin: 10px auto 0;
		}
	}
</style>
